<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        世界上最浪漫的事
        <p>醒来后第一眼看到你将是很<span>美好</span>的事情</p>
        莫过于跟你一起吃早餐
    </div>
    <input type="text" value="666">
    <select name="" id="">
        <option value="1">1</option>
        <option value="2">2</option>

    </select>
    <script>
        var divele = document.getElementsByTagName('div')[0];

        // console.log(divele.innerHTML); // 标签也以字符串的形式输出
        /*  世界上最浪漫的事
        <p>醒来后第一眼看到你将是很<span>美好</span>的事情</p>
        莫过于跟你一起吃早餐 */
        // console.log(divele.innerText);// 只给文本 不给标签

        /* 世界上最浪漫的事

醒来后第一眼看到你将是很美好的事情

莫过于跟你一起吃早餐  */

        // divele.innerHTML = '<h1>能不能洗个东西,洗啥呢,喜欢我</h1>';
        // 浏览器解析h1标签    一级标题显示  

        // divele.innerText = '<h1>能不能洗个东西,洗啥呢,喜欢我</h1>';
        //<h1>能不能洗个东西,洗啥呢,喜欢我</h1>  h1不被解析  以字符串的形势输出到屏幕上

        //两个都是完全覆盖以前的内容


        // 获取 表单元素 

        var inp = document.querySelector('input');

        // alert(inp.value);// 获取表单的值 

        inp.value = '9998888';
        var selectele = document.querySelector('select');

        // alert(selectele.value);// 获取表单的值 
        selectele.value = 2;
        
    </script>
</body>
</html>